<template>
  <div class="app-container">
  <div class="filter-container">
        
        <el-date-picker v-model="search.month" type="month"  placeholder="选择月"></el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="销售顾问">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="接待">
        <template slot-scope="scope">
            <span v-show="!scope.row.nodata">{{ scope.row.reception }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.reception"></el-input>
            </span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="意向">
        <template slot-scope="scope">
            <span v-show="!scope.row.nodata">{{ scope.row.intention }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.intention"></el-input>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="战败">
        <template slot-scope="scope">
            <span v-show="!scope.row.nodata">{{ scope.row.fail }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.fail"></el-input>
            </span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="订单">
        <template slot-scope="scope">
          <span v-show="!scope.row.nodata">{{ scope.row.order }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.order"></el-input>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="销售">
        <template slot-scope="scope">
          <span v-show="!scope.row.nodata">{{ scope.row.sales }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.sales"></el-input>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="保险">
        <template slot-scope="scope">
          <span v-show="!scope.row.nodata">{{ scope.row.insurance }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.insurance"></el-input>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="精品">
        <template slot-scope="scope">
            <span v-show="!scope.row.nodata">{{ scope.row.boutique }}</span>
            <span v-show="scope.row.nodata">
                <el-input type="number" placeholder="数值" v-model="scope.row.boutique"></el-input>
            </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="月份">
        <template slot-scope="scope">
            <span>{{ scope.row.month }}</span>
          <!-- <span v-show="!scope.row.nodata">{{ scope.row.month }}</span>
          <span v-show="scope.row.nodata">{{search.month | parseTime('{y}-{m}')}}</span> -->
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="280" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="saveClick(scope.row.id)">保存</el-button>
          <el-button type="danger" size="small" @click="resetClick(scope.row.id)">重置</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />


  </div>
</template>

<script>
import * as settingApi from '@/api/presale/setting'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {parseTime} from '@/utils/index'

export default {
    name:'SalesTask',
    components: { Pagination },
    data(){
        return{
          search:{ 
              month:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                month:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
          },

          
        }
    },
    created(){
        var that=this;
        that.search.month=parseTime(new Date(),'{y}-{m}');
        that.fetchData();
    },
    filters:{
      
    },
    methods:{
        fetchData(){
          var that=this;
            settingApi.getSalesTaskList(that.listQuery).then(res=>{
                console.log(res.data)
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        searchClick(){
            this.fetchData();
        },
        saveClick(id){
            var that=this;
            var index=that.list.findIndex(o=>o.id==id);
            var item=that.list[index];
            item.nodata=false;
            
        },
        resetClick(id){
            var that=this;
            var index=that.list.findIndex(o=>o.id==id);
            var obj=that.list[index];
            for(var key in obj){
                if(obj.hasOwnProperty(key) && key!='id' && key!='guider' && key!='month'){
                    obj[key]='';
                }
            }
            obj.nodata=true;
        }
    }
}
</script>

<style>

</style>